<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>牛牛商城-订单确认</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <script type="text/javascript" src="/static/js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="/static/js/axios-0.18.0.min.js"></script>
</head>


<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />


<body>
<div id="app" v-cloak>
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到牛牛商城!</div>
            <div class="fr" style="cursor: pointer;">
{#                <div class="login_btn fl">#}
{#                    <a href="login.html">登录</a>#}
{#                    <span>|</span>#}
{#                    <a href="register.html">注册</a>#}
{#                </div>#}
                 <div v-if="username" class="login_btn fl">
                    欢迎您：<em>[[ username ]]</em>
                    <span>|</span>
                    <a href="{{ url('users:logout') }}">退出</a>
                </div>
                <div v-else class="login_btn fl">
                    <a href="{{ url('users:login') }}">登录</a>
                    <span>|</span>
                    <a href="{{ url('users:register') }}">注册</a>
                </div>
                <div class="user_link fl">
                    <span>|</span>
{#                    <a href="user_center_info.html">用户中心</a>#}
{#                    <span>|</span>#}
{#                    <a href="cart.html">我的购物车</a>#}
                    <a href="{{ url('users:info') }}">用户中心</a>
                    <span>|</span>
                    <a href="{{ url('carts:info') }}">我的购物车</a>
                    <span>|</span>
                    <a href="/orders/info/1">我的订单</a>
{#                    <a href="{{ url('orders:info') }}">我的订单</a>#}

                </div>
            </div>
        </div>
    </div>

    <div class="search_bar clearfix">
		<a href="{{ url('contents:index') }}" class="logo fl">
            <img src="{{ static('images/logo.png') }}"alt="some_logo"width="120px"height="100px" style="margin-left:80px;"></a>
		<div class="search_wrap fl">
            <form method="get" action="/search/" class="search_con" style="border-radius: 15px;">
                <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                <input type="submit" class="input_btn fr" name="" value="搜索" style="border-radius: 12px;cursor: pointer;">
            </form>
            <ul class="search_suggest fl">
                <li><a href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E6%A0%BC%E7%BA%B9%E7%99%BE%E8%A4%B6%E8%A3%99&clk1=b97410d2f6947cb48f5e6cb9d182522a&upsId=b97410d2f6947cb48f5e6cb9d182522a&spm=a2e0b.20350158.search.1&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_11.170.87.36_5100233_1626270140072%3Bprepvid%3A201_33.5.224.190_5199716_1626311244098">格纹百褶裙</a></li>
                <li><a href="https://uland.taobao.com/sem/tbsearch?spm=a2e0b.20350158.1998559106.5.50d3468agZNqUo&refpid=mm_26632258_3504122_32538762&keyword=%E5%B8%86%E5%B8%83%E9%9E%8B&clk1=b97410d2f6947cb48f5e6cb9d182522a&upsId=b97410d2f6947cb48f5e6cb9d182522a&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_11.170.87.36_5100233_1626270140072%3Bprepvid%3A201_11.175.82.69_5217326_1626311939937">帆布鞋</a></li>
                <li><a href="https://search.jd.com/Search?keyword=%E8%B6%85%E7%81%ABins%E4%B8%8A%E8%A1%A3%E6%BD%AE&enc=utf-8&wq=%E8%B6%85%E7%81%ABins%E4%B8%8A%E8%A1%A3%E6%BD%AE&pvid=585bce480f714a9cbb897208ba0f4778">超火ins上衣潮</a></li>
                <li><a href="https://uland.taobao.com/sem/tbsearch?spm=a2e0b.20350158.1998559106.3.2e3a468aFvG2Qr&refpid=mm_26632258_3504122_32538762&keyword=%E6%96%9C%E8%B7%A8%E5%A5%B3%E5%8C%85&clk1=b97410d2f6947cb48f5e6cb9d182522a&upsId=b97410d2f6947cb48f5e6cb9d182522a&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_11.170.87.36_5100233_1626270140072%3Bprepvid%3A201_11.1.244.185_5213935_1626312052539">斜跨女包</a></li>
            </ul>
        </div>
    </div>

    <h3 class="common_title"><b>确认收货地址</b></h3>
    <div class="common_list_con clearfix" id="get_site">
        <dl>
        {% if addresses %}
            <dt>寄送到：</dt>
            {% for address in addresses %}
            <dd @click="nowsite={{ address.id }}"><input type="radio" v-model="nowsite" value="{{ address.id }}" style="cursor:pointer;">{{ address.province }} {{ address.city }} {{ address.district }} （{{ address.receiver }} 收） {{ address.mobile }}</dd>
            {% endfor %}
        {% endif %}
        </dl>
        <a href="{{ url('users:address') }}" class="edit_site" style="border-radius: 12px;"><b>编辑收货地址</b></a>
    </div>
    <h3 class="common_title"><b>支付方式</b></h3>
    <div class="common_list_con clearfix">
        <div class="pay_style_con clearfix">
            <input type="radio" name="pay_method" value="1" v-model="pay_method" style="cursor:pointer;">
            <label class="cash" style="border-radius: 12px;">货到付款</label>
            <input type="radio" name="pay_method" value="2" v-model="pay_method" style="cursor: pointer;">
            <label class="zhifubao" style="border-radius: 12px;"></label>
        </div>
    </div>
    <h3 class="common_title"><b>商品列表</b></h3>
    <div class="common_list_con clearfix">
        <ul class="goods_list_th clearfix">
            <li class="col01"><b>商品名称</b></li>
            <li class="col02"><b>商品单位</b></li>
            <li class="col03"><b>商品价格</b></li>
            <li class="col04"><b>数量</b></li>
            <li class="col05"><b>小计</b></li>
        </ul>
        {% for sku in skus %}
        <ul class="goods_list_td clearfix">
            <li class="col01">{{loop.index}}</li>
            <li class="col02"><img src="{{ sku.default_image.url }}" style="border:0px;"></li>
            <li class="col03">{{ sku.name }}</li>
            <li class="col04">台</li>
            <li class="col05">{{ sku.price }}元</li>
            <li class="col06">{{ sku.count }}</li>
            <li class="col07">{{ sku.amount }}元</li>
        </ul>
        {% endfor %}
    </div>
    <h3 class="common_title"><b>总金额结算</b></h3>
    <div class="common_list_con clearfix">
        <div class="settle_con">
            <div class="total_goods_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_amount }}元</b></div>
            <div class="transit">运费：<b>{{ freight }}元</b></div>
            <div class="total_pay">实付款：<b>{{ payment_amount }}元</b></div>
        </div>
    </div>
    <div class="order_submit clearfix">
        <a @click="on_order_submit" id="order_btn" style="border:0;cursor: pointer;border-radius: 12px;color:white;"><b>提交订单</b></a>
    </div>

    <div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2021 重庆勇敢牛牛商业股份有限公司 All Rights Reserved</p>
        <p>电话：5208208820 渝ICP备*******8号</p>
        <br>
    </div>
    </div>
    <script type="text/javascript">

        let payment_amount ={{ payment_amount }};
        let default_address_id = {{ user.default_address_id }}
    </script>
    <script type="text/javascript" src="/static/js/common.js"></script>
    <script type="text/javascript" src="/static/js/place_order.js"></script>
</body>
</html>